import React, { useState } from 'react';
import { Form, Input, Modal  } from 'antd';


const FormItem = Form.Item;

const commandPortList=[];
for (var i=1;i<17;i++) {
  commandPortList.push("COM"+i);
}



export interface CreateFormProps {

  modalVisible: boolean;
  onSubmit: (values: API.TaskItem,resetForm: () => void) => void;
  onCancel: () => void;

}

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [form] = Form.useForm();


 
  const [formVals] = useState<API.TaskItem>({});



  const formLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 15 },
  };
  


  const { modalVisible, onSubmit: handleAdd, onCancel } = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    handleAdd(fieldsValue,resetForm);
  };

  const resetForm= async () => {
    form.resetFields();
  };



  
  return (
    <Modal
      width={800}
      destroyOnClose
      title="新增定时任务"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
       <Form
        {...formLayout}
        form={form}
        initialValues={formVals}
      >
      
      <FormItem
          label="任务名称"
          name="jobName"
          rules={[{ required: true, message: '请输入字任务名称！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="任务描述"
          name="description"
          rules={[{ required: true, message: '请输入任务描述！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="cron表达式"
          name="cronExpression"
          rules={[{ required: true, message: '请输入cron表达式！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
        <FormItem
          label="包名+类名"
          name="beanClass"
          rules={[{ required: true, message: '请输入包名+类名！'}]}
        >
          <Input placeholder="请输入" />
        </FormItem>
       
      </Form>
  
      </Modal>
  );
};

export default CreateForm;
